import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
// 使用原生
// export function lazyLoay (fn) {
//   const target = ref(null)
//   const goods = ref([])
//   var intersectionObserver = new IntersectionObserver(
//     ([{ isIntersecting }]) => {
//       // console.log(isIntersecting)
//       // targetIsVisible.value = isIntersecting
//       if (isIntersecting) {
//         // console.log(intersectionObserver)
//         // console.log(11)
//         // stop()
//         fn().then(res => {
//           goods.value = res.result
//         })
//       } else {
//         // console.log(22)
//       }
//       if (!isIntersecting && goods.value.length > 0) {
//         intersectionObserver.unobserve(target.value)
//         intersectionObserver.disconnect()
//       }
//     },
//     {
//       thresholds: [0]
//     }
//   )
//   onMounted(() => {
//     intersectionObserver.observe(target.value)
//   })
//   return { target, goods }
// }
// 使用插件
export function lazyLoay (fn) {
  const goods = ref([])
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }], observerElement) => {
      // console.log(isIntersecting)
      // targetIsVisible.value = isIntersecting
      if (isIntersecting) {
        // console.log(1)
        stop()
        fn().then(res => {
          goods.value = res.result
        })
      } else {
        // console.log(2)
      }
    }
  )
  return { goods, target }
}
